<template>
	<view class="content">
		<div v-if="page==1">
			<div class="baseCon" style="margin-top: 12px;">
				<div class="zflex">
					<image class="oilImg" src="/static/images/oilImg.png"></image>
					<div style="width: calc(100% - 60px);">
						<div class="zflex">
							<div style="font-size: 15px;font-weight: bold;margin-right: auto;">{{form.oilName}}</div>
							<div style="font-size: 15px;color: #ff6c1e;font-weight: 500;">¥{{form.actualPayment}}</div>
						</div>
						<div><span class="oil-tl">价格：</span><span class="oil-tr">¥{{form.discountPrice}}</span></div>
						<div><span class="oil-tl">数量：</span><span class="oil-tr">约{{form.refueleQuantity}}L/kg</span>
						</div>
					</div>
				</div>
			</div>
			<div class="baseCon" style="margin-top: 12px;">
				<div class="zflex">
					<div class="same-lef">退款金额</div>
					<div class="same-rig">¥{{form.actualPayment}}</div>
				</div>
			</div>
			<div class="baseCon" style="margin-top: 12px;">
				<div class="zflex">
					<div class="same-lef" style="width: 120px;">退款原因<span style="color: #ED3B3B;">*</span></div>
					<div class="same-rig zflex zcenter">

						<!-- <span style="color: #A1ABB9;">请选择</span>
						<uni-icons type="right" size="16" color="#A1ABB9"></uni-icons> -->

						<picker @change="bindChange" :value="index" :range="array">
							<span style="color: #A1ABB9;" v-if="index===null">请选择{{index}}</span>
							<view class="uni-input" v-else>{{array[index]}}</view>
						</picker>
						<uni-icons type="right" size="16" color="#A1ABB9"></uni-icons>

					</div>
				</div>
				<div style="color:#83878E;font-size: 13px;margin-top: 10px;">预计1-3个工作日退款至原支付账号</div>
			</div>

			<div class="baseCon" style="margin-top: 12px;">
				<div class="zflex">
					<div class="same-lef">退款说明</div>
				</div>
				<div class="remark-box">
					<textarea v-model="remark" placeholder="请输入" style="height: 60px;width: 100%;" />
				</div>
			</div>

			<div class="fix-bom">
				<div style="margin-right: auto;">退款金额：<span class="pay-t1">￥</span><span
						class="pay-t2">{{form.actualPayment}}</span></div>
				<div class="btn-pay" @click="btnBack">提交</div>
			</div>
		</div>

		<div v-if="page==2">
			<div class="baseCon" style="margin-top: 12px;">
				<div style="text-align: center;">
					<uni-icons type="checkbox-filled" size="80" color="#03AF45"></uni-icons>
					<div style="font-size: 18px;margin:12px 0;">申请退款成功</div>
					<div style="color: #83878E;font-size: 13px;">预计1-3个工作日退款至原支付账号</div>
				</div>
			</div>
			<div style="padding:24px 12px;">
				<div class="btn-pay btn-100" @click="goPage('/pages/order/detail?id=' + eId)">查看订单</div>
			</div>
		</div>
	</view>
</template>

<script>
	import {
		getDicts,
		refuseList,
		detailsDriver,
		refundReasonList,
		requestRefundDriver
	} from '@/request/api.js'
	export default {
		components: {},
		data() {
			return {
				page: 1,
				eId: null,
				form: {},
				array: [],
				index: null,
				remark: '',
				lat: '',
				lon: '',
			}
		},
		mounted() {
			this.getReson()
		},
		onLoad(e) {
			this.eId = e.id
			this.getarea()
		},
		onShow() {

		},
		methods: {

			getarea() {
				const that = this
				uni.getLocation({
					type: 'wgs84', //wgs84 返回 gps 坐标，gcj02 返回可用于 wx.openLocation 的坐标
					success: function(res) {
						that.lat = res.latitude
						that.lon = res.longitude
						that.getDetail()
					},
					fail: function(err) {
						that.getDetail()
					}
				})
			},
			getDetail() {
				let data = {
					id: this.eId,
					latitude: this.lat,
					longitude: this.lon
				}
				detailsDriver(data).then(res => {
					this.form = res.data
				})
			},

			getReson() {
				// refuseList({
				// 	paramKey: 'reason_refund',
				// 	pageNum: 1,
				// 	pageSize: 100
				// }).then(res => {
				// 	this.array = res.rows
				// })
				refundReasonList().then(res => {
					this.array = res.data
				})
			},
			goPage(row) {
				uni.navigateTo({
					url: row
				})
			},

			btnBack() {
				if (this.index === null) {
					uni.$u.toast('请选择退款原因')
					return
				}
				let data = {
					id: this.eId,
					refundReason: this.array[this.index],
					refundRemark: this.remark
				}
				requestRefundDriver(data).then(res => {
					this.page = 2
				})
			},

			bindChange: function(e) {
				this.index = e.detail.value
			},
		}
	}
</script>

<style scoped>

</style>